<template>
  <div class="profile-container">
    <!-- 页面顶部标题 -->
    <div class="profile-header">
      <h1>个人中心</h1>
      <div class="user-info">
        <img :src="currentUser.avatar || 'https://via.placeholder.com/80'" alt="用户头像" class="avatar" />
        <div class="user-details">
          <h2>{{ currentUser.username || '未登录用户' }}</h2>
          <p class="user-level">Lv.{{ userLevel }}</p>
        </div>
      </div>
    </div>

    <!-- 导航标签 -->
    <div class="profile-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-button', { active: activeTab === tab.id }]"
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 主内容区域 -->
    <div class="profile-content">
      <!-- 我的书架 -->
      <div v-if="activeTab === 'bookshelf'" class="tab-content">
        <div class="section-header">
          <h3>我的书架</h3>
          <button class="section-button">管理</button>
        </div>
        <div class="books-grid">
          <div v-for="book in bookshelf" :key="book.id" class="book-item">
            <img :src="book.cover" alt="{{ book.title }}" class="book-cover" />
            <div class="book-info">
              <p class="book-title">{{ book.title }}</p>
              <p class="book-author">{{ book.author }}</p>
              <p class="book-progress">{{ book.progress }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 浏览记录 -->
      <div v-if="activeTab === 'history'" class="tab-content">
        <div class="section-header">
          <h3>浏览记录</h3>
          <button class="section-button" @click="clearHistory">清空记录</button>
        </div>
        <div class="history-list">
          <div v-for="item in browseHistory" :key="item.id" class="history-item">
            <img :src="item.cover" alt="{{ item.title }}" class="history-book-cover" />
            <div class="history-info">
              <p class="history-title">{{ item.title }}</p>
              <p class="history-author">{{ item.author }}</p>
              <p class="history-time">{{ formatDate(item.timestamp) }}</p>
            </div>
            <button class="continue-reading">继续阅读</button>
          </div>
        </div>
      </div>

      <!-- 关注收藏 -->
      <div v-if="activeTab === 'favorites'" class="tab-content">
        <div class="section-header">
          <h3>关注收藏</h3>
        </div>
        <div class="favorites-list">
          <div v-for="item in favorites" :key="item.id" class="favorite-item">
            <img :src="item.cover" alt="{{ item.title }}" class="favorite-book-cover" />
            <div class="favorite-info">
              <p class="favorite-title">{{ item.title }}</p>
              <p class="favorite-author">{{ item.author }}</p>
              <p class="favorite-category">{{ item.category }}</p>
            </div>
            <button class="favorite-button">已收藏</button>
          </div>
        </div>
      </div>

      <!-- 充值中心 -->
      <div v-if="activeTab === 'account'" class="tab-content">
        <div class="section-header">
          <h3>充值中心</h3>
          <div class="recharge-buttons">
            <button class="section-button recharge-button" @click="showRechargeDialog = true">充值书币</button>
            <button class="section-button membership-button" @click="showMembershipDialog = true">充值会员</button>
          </div>
        </div>
        
        <!-- 账户余额卡片 -->
        <div class="balance-card">
          <div class="balance-section">
            <h4>账户余额</h4>
            <div class="balance-amount">
              <span class="balance-number">{{ accountBalance.coins }}</span>
              <span class="balance-unit">书币</span>
            </div>
          </div>
          <div class="divider"></div>
          <div class="tickets-section">
            <div class="ticket-item">
              <span class="ticket-label">月票</span>
              <span class="ticket-number">{{ monthlyTickets }}</span>
            </div>
            <div class="ticket-item">
              <span class="ticket-label">推荐票</span>
              <span class="ticket-number">{{ recommendedTickets }}</span>
            </div>
          </div>
        </div>
        
        <!-- 优惠卡券 -->
        <div class="coupons-section">
          <div class="section-subheader">
            <h4>优惠卡券</h4>
            <span class="coupon-count">{{ coupons.length }}张</span>
          </div>
          <div class="coupons-list">
            <div v-for="coupon in coupons" :key="coupon.id" class="coupon-item">
              <div class="coupon-content">
                <div class="coupon-amount">{{ coupon.amount }}书币</div>
                <div class="coupon-info">
                  <div class="coupon-name">{{ coupon.name }}</div>
                  <div class="coupon-expiry">有效期至: {{ formatDate(coupon.expiryDate) }}</div>
                </div>
              </div>
              <div class="coupon-status">{{ coupon.status }}</div>
            </div>
            <div v-if="coupons.length === 0" class="no-coupons">暂无优惠卡券</div>
          </div>
        </div>
        
        <!-- 交易记录标签页 -->
        <div class="transaction-tabs">
          <button 
            v-for="tab in transactionTabs" 
            :key="tab.id"
            :class="['transaction-tab-button', { active: activeTransactionTab === tab.id }]"
            @click="switchTransactionTab(tab.id)"
          >
            {{ tab.name }}
          </button>
        </div>
        
        <!-- 交易记录内容 -->
        <div class="transaction-content">
          <!-- 充值记录 -->
          <div v-if="activeTransactionTab === 'recharge'" class="records-list">
            <div v-for="record in rechargeRecords" :key="record.id" class="record-item">
              <div class="record-info">
                <div class="record-title">充值书币</div>
                <div class="record-date">{{ formatDate(record.timestamp) }}</div>
              </div>
              <div class="record-amount">+{{ record.amount }}书币</div>
            </div>
            <div v-if="rechargeRecords.length === 0" class="no-records">暂无充值记录</div>
          </div>
          
          <!-- 消费记录 -->
          <div v-if="activeTransactionTab === 'consumption'" class="records-list">
            <div v-for="record in consumptionRecords" :key="record.id" class="record-item">
              <div class="record-info">
                <div class="record-title">{{ record.title }}</div>
                <div class="record-date">{{ formatDate(record.timestamp) }}</div>
              </div>
              <div class="record-amount negative">-{{ record.amount }}书币</div>
            </div>
            <div v-if="consumptionRecords.length === 0" class="no-records">暂无消费记录</div>
          </div>
          
          <!-- 我的收益 -->
          <div v-if="activeTransactionTab === 'earnings'" class="earnings-content">
            <div class="earnings-summary">
              <div class="earnings-item">
                <span class="earnings-label">累计收益</span>
                <span class="earnings-amount">{{ myEarnings.total }}书币</span>
              </div>
              <div class="earnings-item">
                <span class="earnings-label">待结算</span>
                <span class="earnings-amount">{{ myEarnings.pending }}书币</span>
              </div>
            </div>
            <div class="earnings-tips">
              <p>📝 作者收益将在每月1-5日结算</p>
              <p>💡 更多收益规则请查看<a href="#" class="rule-link">收益规则说明</a></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 会员充值对话框 -->
      <div v-if="showMembershipDialog" class="recharge-dialog-overlay" @click="closeMembershipDialog">
        <div class="recharge-dialog membership-dialog" @click.stop>
          <div class="recharge-dialog-header">
            <h3>开通会员</h3>
            <button class="close-button" @click="closeMembershipDialog">×</button>
          </div>
          <div class="recharge-dialog-content">
            <!-- 会员介绍 -->
            <div class="membership-intro">
              <h4>尊享会员特权，畅享优质阅读体验</h4>
              <p>开通会员即可享受四大核心权益，解锁更多精彩内容！</p>
            </div>
            
            <!-- 会员套餐选项 -->
            <div class="membership-options">
              <div 
                class="membership-option"
                :class="{ selected: selectedMembershipOption === 'weekly' }"
                @click="selectMembershipOption('weekly')"
              >
                <div class="membership-option-header">
                  <span class="membership-name">周卡</span>
                  <span class="membership-tag">超值体验</span>
                </div>
                <div class="membership-price">
                  <span class="current-price">￥1</span>
                  <span class="original-price">￥6</span>
                </div>
                <div class="membership-period">有效期7天</div>
              </div>
              
              <div 
                class="membership-option popular"
                :class="{ selected: selectedMembershipOption === 'monthly' }"
                @click="selectMembershipOption('monthly')"
              >
                <div class="membership-option-header">
                  <span class="membership-name">连续包月</span>
                  <span class="membership-tag">最受欢迎</span>
                </div>
                <div class="membership-price">
                  <span class="current-price">￥10</span>
                  <span class="original-price">￥20</span>
                </div>
                <div class="membership-period">每月自动续费</div>
              </div>
              
              <div 
                class="membership-option"
                :class="{ selected: selectedMembershipOption === 'yearly' }"
                @click="selectMembershipOption('yearly')"
              >
                <div class="membership-option-header">
                  <span class="membership-name">12个月套餐</span>
                  <span class="membership-tag">年度特惠</span>
                </div>
                <div class="membership-price">
                  <span class="current-price">￥158</span>
                  <span class="original-price">￥240</span>
                </div>
                <div class="membership-period">有效期365天</div>
              </div>
            </div>
            
            <!-- 会员特权 -->
            <div class="membership-benefits">
              <h4>会员四大权益</h4>
              <div class="benefits-list">
                <div v-for="benefit in membershipBenefits" :key="benefit.id" class="benefit-item">
                  <div class="benefit-icon">{{ benefit.icon }}</div>
                  <div class="benefit-info">
                    <div class="benefit-name">{{ benefit.name }}</div>
                    <div class="benefit-description">{{ benefit.description }}</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 支付方式 -->
            <div class="payment-methods">
              <h4>支付方式</h4>
              <div class="payment-options">
                <button class="payment-option">微信支付</button>
                <button class="payment-option">支付宝</button>
                <button class="payment-option">银行卡</button>
              </div>
            </div>
            
            <!-- 常见问题 -->
            <div class="membership-faq">
              <h4>常见问题</h4>
              <div class="faq-list">
                <div v-for="faq in membershipFAQ" :key="faq.question" class="faq-item">
                  <div class="faq-question">{{ faq.question }}</div>
                  <div class="faq-answer">{{ faq.answer }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="recharge-dialog-footer">
            <button class="cancel-button" @click="closeMembershipDialog">取消</button>
            <button class="confirm-button" @click="confirmMembership">确认开通</button>
          </div>
        </div>
      </div>
      
      <!-- 充值对话框 -->
      <div v-if="showRechargeDialog" class="recharge-dialog-overlay" @click="closeRechargeDialog">
        <div class="recharge-dialog" @click.stop>
          <div class="recharge-dialog-header">
            <h3>充值书币</h3>
            <button class="close-button" @click="closeRechargeDialog">×</button>
          </div>
          <div class="recharge-dialog-content">
            <div class="recharge-options">
              <button 
                v-for="option in rechargeOptions" 
                :key="option.amount"
                :class="['recharge-option', { selected: selectedRechargeOption === option.amount }]"
                @click="selectRechargeOption(option.amount)"
              >
                <span class="recharge-amount">{{ option.amount }}</span>
                <span class="recharge-price">￥{{ option.price }}</span>
              </button>
            </div>
            <div class="payment-methods">
              <h4>支付方式</h4>
              <div class="payment-options">
                <button class="payment-option">微信支付</button>
                <button class="payment-option">支付宝</button>
                <button class="payment-option">银行卡</button>
              </div>
            </div>
          </div>
          <div class="recharge-dialog-footer">
            <button class="cancel-button" @click="closeRechargeDialog">取消</button>
            <button class="confirm-button" @click="confirmRecharge">确认充值</button>
          </div>
        </div>
      </div>

      <!-- 阅读偏好 -->
      <div v-if="activeTab === 'preferences'" class="tab-content">
        <div class="section-header">
          <h3>阅读偏好</h3>
        </div>
        <div class="preferences-content">
          <div class="preference-category">
            <h4>喜欢的分类</h4>
            <div class="tags-container">
              <span v-for="tag in preferredCategories" :key="tag" class="preference-tag">
                {{ tag }}
              </span>
            </div>
          </div>
          <div class="preference-category">
            <h4>阅读设置</h4>
            <div class="setting-item">
              <label>字体大小</label>
              <select>
                <option>小</option>
                <option selected>中</option>
                <option>大</option>
              </select>
            </div>
            <div class="setting-item">
              <label>背景颜色</label>
              <select>
                <option>白色</option>
                <option selected>护眼黄</option>
                <option>深色</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <!-- 荣誉称号 -->
      <div v-if="activeTab === 'honors'" class="tab-content">
        <div class="section-header">
          <h3>荣誉称号</h3>
        </div>
        <div class="honors-grid">
          <div v-for="honor in honors" :key="honor.id" class="honor-item">
            <div class="honor-icon" :style="{ background: honor.color }">
              {{ honor.icon }}
            </div>
            <div class="honor-info">
              <p class="honor-name">{{ honor.name }}</p>
              <p class="honor-description">{{ honor.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 帮助与客服 -->
      <div v-if="activeTab === 'help'" class="tab-content">
        <div class="section-header">
          <h3>帮助与客服</h3>
        </div>
        <div class="help-content">
          <div class="help-categories">
            <div class="help-item">
              <h4>常见问题</h4>
              <ul>
                <li><a href="#">如何修改密码？</a></li>
                <li><a href="#">如何找回账号？</a></li>
                <li><a href="#">会员特权说明</a></li>
                <li><a href="#">阅读时长计算</a></li>
              </ul>
            </div>
            <div class="help-item">
              <h4>联系客服</h4>
              <p>在线客服：工作日 9:00-18:00</p>
              <p>客服邮箱：support@example.com</p>
              <button class="contact-service">在线咨询</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { 
  getUserInfo, 
  getBookshelf, 
  getBrowseHistory, 
  getFavorites, 
  getHonors,
  getAccountBalance,
  getMonthlyTickets,
  getRecommendedTickets,
  getCoupons,
  getRechargeRecords,
  getConsumptionRecords,
  getMyEarnings
} from '../utils/userService';

export default {
  name: 'ProfileView',
  setup() {
    const router = useRouter();
    const activeTab = ref('bookshelf');
    const currentUser = ref(getUserInfo());
    
    // 模拟数据
    const userLevel = ref(5);
    const bookshelf = ref(getBookshelf() || [
      {
        id: 1,
        title: '三体',
        author: '刘慈欣',
        cover: 'https://via.placeholder.com/120x180?text=三体',
        progress: '已读53%'
      },
      {
        id: 2,
        title: '活着',
        author: '余华',
        cover: 'https://via.placeholder.com/120x180?text=活着',
        progress: '已读87%'
      },
      {
        id: 3,
        title: '百年孤独',
        author: '加西亚·马尔克斯',
        cover: 'https://via.placeholder.com/120x180?text=百年孤独',
        progress: '已读32%'
      },
      {
        id: 4,
        title: '平凡的世界',
        author: '路遥',
        cover: 'https://via.placeholder.com/120x180?text=平凡的世界',
        progress: '已读15%'
      }
    ]);
    
    const browseHistory = ref(getBrowseHistory() || [
      {
        id: 1,
        title: '哈利波特与魔法石',
        author: 'J.K.罗琳',
        cover: 'https://via.placeholder.com/80x120?text=哈利波特',
        timestamp: Date.now() - 86400000 // 1天前
      },
      {
        id: 2,
        title: '围城',
        author: '钱钟书',
        cover: 'https://via.placeholder.com/80x120?text=围城',
        timestamp: Date.now() - 172800000 // 2天前
      },
      {
        id: 3,
        title: '红楼梦',
        author: '曹雪芹',
        cover: 'https://via.placeholder.com/80x120?text=红楼梦',
        timestamp: Date.now() - 604800000 // 7天前
      }
    ]);
    
    const favorites = ref(getFavorites() || [
      {
        id: 1,
        title: '盗墓笔记',
        author: '南派三叔',
        cover: 'https://via.placeholder.com/80x120?text=盗墓笔记',
        category: '悬疑冒险'
      },
      {
        id: 2,
        title: '鬼吹灯',
        author: '天下霸唱',
        cover: 'https://via.placeholder.com/80x120?text=鬼吹灯',
        category: '悬疑冒险'
      },
      {
        id: 3,
        title: '雪中悍刀行',
        author: '烽火戏诸侯',
        cover: 'https://via.placeholder.com/80x120?text=雪中悍刀行',
        category: '武侠玄幻'
      }
    ]);
    
    const preferredCategories = ref(['科幻', '悬疑', '历史', '武侠']);
    
    const honors = ref(getHonors() || [
      {
        id: 1,
        name: '阅读达人',
        description: '连续阅读超过30天',
        icon: '📚',
        color: '#4CAF50'
      },
      {
        id: 2,
        name: '书评大师',
        description: '发表10篇以上优质书评',
        icon: '✍️',
        color: '#2196F3'
      },
      {
        id: 3,
        name: '新书尝鲜',
        description: '率先阅读5本新书',
        icon: '🌟',
        color: '#FF9800'
      }
    ]);
    
    // 定义标签页
    const tabs = ref([
      { id: 'bookshelf', name: '我的书架' },
      { id: 'history', name: '浏览记录' },
      { id: 'favorites', name: '关注收藏' },
      { id: 'account', name: '充值中心' },
      { id: 'preferences', name: '阅读偏好' },
      { id: 'honors', name: '荣誉称号' },
      { id: 'help', name: '帮助与客服' }
    ]);
    
    // 充值相关状态
    const accountBalance = ref(getAccountBalance() || { coins: 1280, cash: 0 });
    const monthlyTickets = ref(getMonthlyTickets() || 5);
    const recommendedTickets = ref(getRecommendedTickets() || 10);
    
    // 优惠券数据
    const coupons = ref(getCoupons() || [
      {
        id: 1,
        name: '新用户专享券',
        amount: 100,
        expiryDate: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30天后过期
        status: '可用'
      },
      {
        id: 2,
        name: '充值满减券',
        amount: 50,
        expiryDate: Date.now() + 15 * 24 * 60 * 60 * 1000, // 15天后过期
        status: '可用'
      },
      {
        id: 3,
        name: '节日特惠券',
        amount: 200,
        expiryDate: Date.now() - 7 * 24 * 60 * 60 * 1000, // 已过期
        status: '已过期'
      }
    ]);
    
    // 充值记录数据
    const rechargeRecords = ref(getRechargeRecords() || [
      {
        id: 1,
        amount: 500,
        timestamp: Date.now() - 86400000 // 1天前
      },
      {
        id: 2,
        amount: 1000,
        timestamp: Date.now() - 7 * 86400000 // 7天前
      },
      {
        id: 3,
        amount: 200,
        timestamp: Date.now() - 30 * 86400000 // 30天前
      }
    ]);
    
    // 消费记录数据
    const consumptionRecords = ref(getConsumptionRecords() || [
      {
        id: 1,
        title: '购买章节：《三体》第15章',
        amount: 50,
        timestamp: Date.now() - 2 * 86400000 // 2天前
      },
      {
        id: 2,
        title: '订阅小说：《活着》全文',
        amount: 300,
        timestamp: Date.now() - 5 * 86400000 // 5天前
      },
      {
        id: 3,
        title: '购买月票',
        amount: 100,
        timestamp: Date.now() - 10 * 86400000 // 10天前
      }
    ]);
    
    // 我的收益数据
    const myEarnings = ref(getMyEarnings() || { total: 850, pending: 230 });
    
    // 交易记录标签
    const transactionTabs = ref([
      { id: 'recharge', name: '充值记录' },
      { id: 'consumption', name: '消费记录' },
      { id: 'earnings', name: '我的收益' }
    ]);
    
    const activeTransactionTab = ref('recharge');
    
    // 切换交易记录标签
    const switchTransactionTab = (tabId) => {
      activeTransactionTab.value = tabId;
    };
    
    // 充值对话框状态
    const showRechargeDialog = ref(false);
    const selectedRechargeOption = ref(100);
    
    // 会员充值对话框状态
    const showMembershipDialog = ref(false);
    const selectedMembershipOption = ref('weekly');
    
    // 会员特权数据
    const membershipBenefits = [
      { id: 1, name: '开通个人论坛权限', description: '参与专属论坛讨论，与作者和读者深度交流', icon: '💬' },
      { id: 2, name: '书籍资源独享权益', description: '独家获取平台精选优质内容，抢先阅读新书', icon: '📚' },
      { id: 3, name: '出版书畅读权益', description: '畅读海量出版书籍，无需额外付费', icon: '🔓' },
      { id: 4, name: '有声书免费听权益', description: '所有有声书内容免费收听，多场景切换阅读方式', icon: '🎧' }
    ];
    
    // 会员常见问题
    const membershipFAQ = [
      {
        question: '如何查看我的会员有效期？',
        answer: '在个人中心页面顶部，您的用户名下方会显示会员状态及有效期。'
      },
      {
        question: '会员到期后，已阅读的内容还能继续访问吗？',
        answer: '会员到期后，您将无法访问会员专属内容，但您的阅读历史和个人数据会被保留。'
      },
      {
        question: '如何取消连续包月服务？',
        answer: '您可以在会员中心页面找到"管理订阅"选项，取消连续包月服务。'
      },
      {
        question: '会员可以退款吗？',
        answer: '根据平台规定，会员购买后7天内未使用可申请退款，具体政策请查看用户协议。'
      }
    ];
    
    // 打开会员充值对话框
    const openMembershipDialog = () => {
      showMembershipDialog.value = true;
    };
    
    // 关闭会员充值对话框
    const closeMembershipDialog = () => {
      showMembershipDialog.value = false;
    };
    
    // 选择会员选项
    const selectMembershipOption = (option) => {
      selectedMembershipOption.value = option;
    };
    
    // 确认会员充值
    const confirmMembership = () => {
      // 在实际应用中，这里应该调用后端API进行会员充值
      // 这里为了演示，我们直接显示成功提示
      let membershipType = '';
      if (selectedMembershipOption.value === 'weekly') {
        membershipType = '周卡会员';
      } else if (selectedMembershipOption.value === 'monthly') {
        membershipType = '连续包月会员';
      } else if (selectedMembershipOption.value === 'yearly') {
        membershipType = '12个月会员';
      }
      
      alert(`开通${membershipType}成功！\n感谢您的支持，祝您阅读愉快！`);
      closeMembershipDialog();
    };
    
    // 充值选项
    const rechargeOptions = ref([
      { amount: 100, price: 10 },
      { amount: 300, price: 30 },
      { amount: 500, price: 50 },
      { amount: 1000, price: 100 },
      { amount: 2000, price: 200 },
      { amount: 5000, price: 500 }
    ]);
    
    // 选择充值选项
    const selectRechargeOption = (amount) => {
      selectedRechargeOption.value = amount;
    };
    
    // 打开充值对话框
    const openRechargeDialog = () => {
      showRechargeDialog.value = true;
    };
    
    // 关闭充值对话框
    const closeRechargeDialog = () => {
      showRechargeDialog.value = false;
    };
    
    // 确认充值
    const confirmRecharge = () => {
      // 在实际应用中，这里应该调用后端API进行充值
      // 这里为了演示，我们直接更新余额和添加充值记录
      const rechargeOption = rechargeOptions.value.find(option => option.amount === selectedRechargeOption.value);
      if (rechargeOption) {
        // 更新余额
        accountBalance.value.coins += rechargeOption.amount;
        
        // 添加充值记录
        const newRecord = {
          id: Date.now(),
          amount: rechargeOption.amount,
          timestamp: Date.now()
        };
        rechargeRecords.value.unshift(newRecord);
        
        // 显示成功提示
        alert(`充值成功！已到账${rechargeOption.amount}书币`);
        
        // 关闭对话框
        closeRechargeDialog();
      }
    };
    
    // 切换标签
    const switchTab = (tabId) => {
      activeTab.value = tabId;
    };
    
    // 清空浏览记录
    const clearHistory = () => {
      if (confirm('确定要清空所有浏览记录吗？')) {
        browseHistory.value = [];
        // 这里可以添加保存到localStorage的逻辑
      }
    };
    
    // 格式化日期
    const formatDate = (timestamp) => {
      if (!timestamp) return '暂无';
      const date = new Date(timestamp);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    };
    
    return {
      activeTab,
      tabs,
      currentUser,
      userLevel,
      bookshelf,
      browseHistory,
      favorites,
      preferredCategories,
      honors,
      switchTab,
      clearHistory,
      formatDate,
      
      // 充值相关状态
      accountBalance,
      monthlyTickets,
      recommendedTickets,
      coupons,
      rechargeRecords,
      consumptionRecords,
      myEarnings,
      transactionTabs,
      activeTransactionTab,
      
      // 充值对话框相关
      showRechargeDialog,
      selectedRechargeOption,
      rechargeOptions,
      
      // 充值相关方法
      switchTransactionTab,
      selectRechargeOption,
      closeRechargeDialog,
      confirmRecharge,
      
      // 会员充值相关状态
      showMembershipDialog,
      selectedMembershipOption,
      membershipBenefits,
      membershipFAQ,
      
      // 会员充值相关方法
      closeMembershipDialog,
      selectMembershipOption,
      confirmMembership
    };
  }
};
</script>

<style scoped>
/* 个人中心容器 */
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面顶部 */
.profile-header {
  text-align: center;
  margin-bottom: 30px;
}

.profile-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e0e0e0;
}

.user-details h2 {
  font-size: 24px;
  margin: 0;
  color: #333;
}

.user-level {
  font-size: 14px;
  color: #666;
  margin: 5px 0 0 0;
}

/* 导航标签 */
.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
}

.tab-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

.tab-button.active {
  background-color: #2196F3;
  color: white;
}

/* 主内容区域 */
/* 充值按钮容器 */
.recharge-buttons {
  display: flex;
  gap: 10px;
}

/* 充值按钮样式 */
.recharge-button {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.recharge-button:hover {
  background: linear-gradient(135deg, #ff5252, #ff7575);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
}

/* 会员按钮样式 */
.membership-button {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.membership-button:hover {
  background: linear-gradient(135deg, #43A047, #558B2F);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

/* 余额卡片样式 */
.balance-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
}

.balance-section h4 {
  font-size: 16px;
  opacity: 0.9;
  margin: 0 0 10px 0;
}

.balance-amount {
  display: flex;
  align-items: baseline;
}

.balance-number {
  font-size: 36px;
  font-weight: bold;
  margin-right: 5px;
}

.balance-unit {
  font-size: 18px;
  opacity: 0.9;
}

.divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
}

.tickets-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ticket-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ticket-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.ticket-number {
  font-size: 24px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 15px;
}

/* 优惠券部分样式 */
.coupons-section {
  margin-bottom: 30px;
}

.section-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-subheader h4 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.coupon-count {
  color: #666;
  font-size: 14px;
}

.coupons-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.coupon-item {
  min-width: 280px;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.coupon-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.coupon-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.coupon-amount {
  font-size: 28px;
  font-weight: bold;
  color: #ff6b6b;
  min-width: 80px;
  text-align: center;
}

.coupon-info {
  flex: 1;
}

.coupon-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.coupon-expiry {
  font-size: 14px;
  color: #666;
}

.coupon-status {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 12px;
  background: #f5f5f5;
  color: #666;
}

.no-coupons {
  text-align: center;
  color: #999;
  padding: 40px;
  font-size: 16px;
  background: #fafafa;
  border-radius: 15px;
  width: 100%;
}

/* 交易记录标签样式 */
.transaction-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}

.transaction-tab-button {
  padding: 8px 20px;
  background: none;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
}

.transaction-tab-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

.transaction-tab-button.active {
  background-color: #4caf50;
  color: white;
}

/* 交易记录内容样式 */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.record-info {
  flex: 1;
}

.record-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.record-date {
  font-size: 14px;
  color: #666;
}

.record-amount {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}

.record-amount.negative {
  color: #ff6b6b;
}

.no-records {
  text-align: center;
  color: #999;
  padding: 60px;
  font-size: 16px;
  background: #fafafa;
  border-radius: 15px;
}

/* 我的收益样式 */
.earnings-content {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.earnings-summary {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.earnings-item {
  text-align: center;
}

.earnings-label {
  display: block;
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.earnings-amount {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #4caf50;
}

.earnings-tips {
  text-align: center;
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.rule-link {
  color: #2196f3;
  text-decoration: none;
}

.rule-link:hover {
  text-decoration: underline;
}

/* 充值对话框样式 */
.recharge-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.recharge-dialog {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.recharge-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e0e0e0;
}

.recharge-dialog-header h3 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.close-button:hover {
  background: #f5f5f5;
  color: #666;
}

.recharge-dialog-content {
  padding: 25px;
}

.recharge-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.recharge-option {
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 15px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.recharge-option:hover {
  border-color: #4caf50;
}

.recharge-option.selected {
  border-color: #4caf50;
  background: #f1f8e9;
}

.recharge-amount {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.recharge-price {
  display: block;
  font-size: 14px;
  color: #666;
}

.payment-methods h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
}

.payment-options {
  display: flex;
  gap: 15px;
}

.payment-option {
  flex: 1;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  color: #666;
}

.payment-option:hover {
  border-color: #2196f3;
}

.recharge-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 20px 25px;
  border-top: 1px solid #e0e0e0;
}

.cancel-button {
  padding: 10px 25px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  background: white;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s;
}

.cancel-button:hover {
  border-color: #999;
}

.confirm-button {
  padding: 10px 25px;
  border: none;
  border-radius: 25px;
  background: #4caf50;
  cursor: pointer;
  font-size: 16px;
  color: white;
  transition: all 0.3s;
}

.confirm-button:hover {
  background: #43a047;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* 会员对话框样式 */
.membership-dialog {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

/* 会员介绍 */
.membership-intro {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 15px;
}

.membership-intro h4 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
}

.membership-intro p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 会员套餐选项 */
.membership-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.membership-option {
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 15px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.membership-option:hover {
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.15);
}

.membership-option.selected {
  border-color: #4CAF50;
  background: #f1f8e9;
}

.membership-option.popular {
  border-color: #FF9800;
  background: linear-gradient(to right, #fff3e0, #ffffff);
}

.membership-option.popular:hover {
  border-color: #F57C00;
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.2);
}

.membership-option.popular.selected {
  border-color: #F57C00;
  background: #fff3e0;
}

.membership-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.membership-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.membership-tag {
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 12px;
  background: #e0e0e0;
  color: #666;
}

.membership-option.popular .membership-tag {
  background: #FFC107;
  color: #333;
}

.membership-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b6b;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.membership-period {
  font-size: 14px;
  color: #666;
}

/* 会员权益 */
.membership-benefits {
  margin-bottom: 30px;
}

.membership-benefits h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  transition: all 0.3s;
}

.benefit-item:hover {
  background: #f1f1f1;
  transform: translateX(5px);
}

.benefit-icon {
  font-size: 24px;
  min-width: 30px;
}

.benefit-info {
  flex: 1;
}

.benefit-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.benefit-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 常见问题 */
.membership-faq {
  margin-bottom: 20px;
}

.membership-faq h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  padding: 15px;
  background: #f5f5f5;
  border-radius: 10px;
}

.faq-question {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.faq-question::before {
  content: 'Q: ';
  position: absolute;
  left: 0;
  color: #2196F3;
}

.faq-answer {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  position: relative;
  padding-left: 20px;
}

.faq-answer::before {
  content: 'A: ';
  position: absolute;
  left: 0;
  color: #4CAF50;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .balance-card {
    flex-direction: column;
    gap: 20px;
  }
  
  .divider {
    width: 80%;
    height: 1px;
  }
  
  .recharge-options {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .payment-options {
    flex-direction: column;
  }
  
  .membership-dialog {
    width: 95%;
    margin: 10px;
  }
  
  .recharge-buttons {
    flex-direction: column;
  }
  
  .recharge-button,
  .membership-button {
    width: 100%;
  }
}

/* 主内容区域 */
.profile-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 区域标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.section-button {
  padding: 6px 16px;
  background-color: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: background-color 0.3s;
}

.section-button:hover {
  background-color: #e0e0e0;
}

/* 我的书架 */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.book-cover {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.book-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}

.book-author {
  font-size: 12px;
  color: #666;
  margin: 0 0 4px 0;
}

.book-progress {
  font-size: 12px;
  color: #2196F3;
  margin: 0;
}

/* 浏览记录 */
.history-list,
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.history-item,
.favorite-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: background-color 0.3s;
}

.history-item:hover,
.favorite-item:hover {
  background-color: #f0f0f0;
}

.history-book-cover,
.favorite-book-cover {
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}

.history-info,
.favorite-info {
  flex: 1;
}

.history-title,
.favorite-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.history-author,
.favorite-author,
.favorite-category,
.history-time {
  font-size: 14px;
  color: #666;
  margin: 0 0 4px 0;
}

.continue-reading,
.favorite-button {
  padding: 8px 16px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.continue-reading:hover {
  background-color: #1976D2;
}

.favorite-button {
  background-color: #4CAF50;
}

.favorite-button:hover {
  background-color: #45A049;
}

/* 我的账户 */
.account-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.account-item label {
  font-size: 14px;
  color: #666;
}

.account-item span {
  font-size: 14px;
  color: #333;
}

.account-item span.active {
  color: #4CAF50;
  font-weight: bold;
}

.edit-profile {
  padding: 10px 24px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.edit-profile:hover {
  background-color: #1976D2;
}

/* 阅读偏好 */
.preferences-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preference-category h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 10px 0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preference-tag {
  padding: 6px 12px;
  background-color: #e3f2fd;
  color: #1976D2;
  border-radius: 16px;
  font-size: 14px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.setting-item label {
  font-size: 14px;
  color: #333;
}

.setting-item select {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* 荣誉称号 */
.honors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.honor-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.honor-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.honor-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.honor-info h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 4px 0;
}

.honor-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 帮助与客服 */
.help-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.help-item h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #2196F3;
}

.help-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-item li {
  margin-bottom: 10px;
}

.help-item a {
  text-decoration: none;
  color: #2196F3;
  font-size: 14px;
  transition: color 0.3s;
}

.help-item a:hover {
  color: #1976D2;
  text-decoration: underline;
}

.help-item p {
  font-size: 14px;
  color: #666;
  margin: 0 0 10px 0;
}

.contact-service {
  padding: 10px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.contact-service:hover {
  background-color: #45A049;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-tabs {
    justify-content: center;
  }
  
  .books-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .honors-grid {
    grid-template-columns: 1fr;
  }
  
  .help-categories {
    grid-template-columns: 1fr;
  }
}
</style>